<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h2>{{fullname}}</h2>
        <h2>{{fn()}}</h2>
        <input type="text" v-model='firstname'>
        <input type="text" v-model='secondname'>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            firstname:'',
            secondname:''
        },
        computed: {
          // 这里的属性名 也是不能跟 data中的重复
          // fullname(){
          //   // 依赖： 在同步函数中使用了当前实例的哪些属性  那么  这个计算属性就就是依赖哪些属性
          //   // 只要依赖发生改变  这个函数就会执行;依赖不发生改变 那么 这个就不会执行
          //   // console.log('计算属性')
            
          //   // setTimeout(() => {
          //   //   console.log(this.firstname + ' ' + this.secondname)
          //   // }, 10);
          //   return this.firstname + ' ' + this.secondname
          // }
          fullname:{
            get(){
              // 上边德那种简写方式 就是 相当于 只写了get没有写 set
              return this.firstname + ' ' + this.secondname
            },
            set(val){
              console.log(val)
              this.firstname = val;
            }
          }
        },
        methods: {
          fn(){
            console.log('methods')
            return this.firstname + ' ' + this.secondname
          },
          f1(){
            this.name = this.firstname + ' ' + this.secondname
          },
          f2(){
            this.name = this.firstname + ' ' + this.secondname
          }
        },
    });
</script>